<template>
  <div>
    <p v-color="color1">Hello Kitty</p>
    <p v-color="color2">Hello Kitty</p>
    <p v-color="color3">Hello Kitty</p>
    <input type="text" v-focus>
    <my-test :uname="uname"></my-test>
  </div>
</template>

<script>
import MyTest from './components/MyTest.vue'
export default {
  components: { MyTest },
  data () {
    return {
      color1: '#fe7299',
      color2: '#8df',
      color3: '#a6a1d9',
      uname: '小鱼卷'
    }
  },
  // directives 用于定义自定义指令
  directives: {
    // 【 对象写法 】
    // 指令名：{
    // 1.只执行一次，在元素插入到DOM树之前执行此时他的父节点是 null
    // （如果控制元素样式、文本...在bind里面写）
    //   bind (el,obj) {}, el表示当前使用指令的元素，obj里面包含指令的值
   
    // 2.只执行一次，在元素插入到DOM树之后执行，此时他有父节点
    // （如果控制元素行为，比如获取焦点，只能在inserted）
    //   inserted (el,obj) {}, el表示当前使用指令的元素，obj里面包含指令的值
   
    // 3.数据更新后，update会执行，子组件的数据可能还没有更新
    // （如果不涉及父传子，就用update没有问题）
    //   update (el,obj) {}, el表示当前使用指令的元素，obj里面包含指令的值
   
    // 4.数据更新后，componentUpdated会执行；所有组件的数据都更新完毕
    // (如果涉及父传子，就用componentUpdated，才能保证没有问题)
    //   componentUpdated (el,obj) {}, el表示当前使用指令的元素，obj里面包含指令的值
    
    // 5.只执行一次，在指令解绑的时候，会自动执行（组件销毁的时候执行）
    //   unbind (el,obj) {}, el表示当前使用指令的元素，obj里面包含指令的值
    // }
    color : {
      // 在元素插入到 DOM树 之前执行；此时它的父节点是null，这个时候bind执行，而且就执行一次
      // 可以在bind中，对元素进行一些初始化的操作
      bind(el, obj) {
      el.style.color = obj.value
      },
      // 虚拟DOM更新后执行（数据更新了 --> 虚拟DOM更新）
      update (el, obj) {
      el.style.color = obj.value
      },
    },
    focus: {
      // bind (el) {
      //   el.focus()
      // },
      inserted (el) {
        el.focus()
      }
    }
    // 【 函数写法 】
    // 如果指令只有bind和update方法，并且两个方法一样，才可以简写成函数
    // 这个函数既是bind又是update
    // 指令名 (el, obj) {}
    // color (el, obj) {
    //   el.style.color = obj.value
    // }

  }
}
</script>

<style>

</style>